<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--edge浏览器H5兼容设置-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!--360浏览器H5兼容设置-->
		<meta name="renderer" content="webkit" />
		<title>电脑商城</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--导入核心文件-->
		<script src="../bootstrap3/js/holder.js"></script>
		<link href="../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../bootstrap3/jquery-1.9.1.min.js"></script>
		<script src="../bootstrap3/js/bootstrap.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../css/top.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../css/layout.css" />
		<link rel="stylesheet" type="text/css" href="../css/reg.css" />
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
	</head>
	<body>
		<!--头部-->
		<header class="header">
			<img src="../images/index/hphlogo.png" alt="" />
			<span class="pull-right"><small>欢迎访问</small><b>电脑商城</b></span>
		</header>
		<!--主体-->
		<div class="container mycontent text-left">
			<!--透明层 -->
			<div class="regDiv">
				<p>新用户注册</p>
				<!--表单开始-->
				<form id="form-reg" class="form-horizontal" role="form">
					<!--用户名-->
					<div class="form-group">
						<label class="col-md-3 control-label">名字：</label>
						<div class="col-md-8">
							<input name="username" type="text" class="form-control" placeholder="请输入用户名">
						</div>
					</div>
					<!--密码-->
					<div class="form-group">
						<label class="col-md-3 control-label"> 密码：</label>
						<div class="col-md-8">
							<input name="password" type="password" class="form-control" placeholder="请输入密码">
						</div>
					</div>
					<!--确认密码-->
					<div class="form-group">
						<label class="col-md-3 control-label"> 确认密码：</label>
						<div class="col-md-8">
							<input type="password" class="form-control" placeholder="请再次输入密码">
						</div>
					</div>
					<!--提交按钮-->
					<div class="form-group">
						<label class="col-md-3 control-label"></label>
						<div class="col-md-8">
							<input id="btn-reg" class="btn btn-primary" type="button" value="立即注册" />
							<span class="pull-right"><small>已经有账号？</small><a href="login.html">登录</a></span>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--页脚开始-->
		<footer class="footer">
			<div class="col-md-12 text-center bottom">
				haut-rj2002-hph-----<a target="_blank" style="font-size: 12px" href="http://yplz.xyz/">韩鹏辉的博客</a> 欢迎参观
			</div>
		</footer>
		<!--页脚结束-->
		<script>
			//1.监听注册按钮是否被点击,如果被点击可以执行一个方法(这里不能像ajax函数那样删去function()只留下{},这是官方规定的!)
			$("#btn-reg").click(function () {

				//let username = $("#username").val();
				//let pwd = $("#password").val();
				//上面这两行是动态获取表单中控件的数据,但是如果这样获取的话ajax函数中
				//就是data: "username="+username + "&password="+pwd,但太麻烦了,如
				// 果这个表单提交的是用户的兴趣爱好,那数据就很多了,一个表单20个数据都很正
				// 常,如果此时还用这种方式就太麻烦了,所以不建议用这种方式

				//2.发送ajax()的异步请求来完成用户的注册功能
				$.ajax({
					url: "/users/reg",
					type: "POST",

					//serialize这个API会自动检测该表单有什么控件,每个控件检测后还会获取每个控
					// 件的值,拿到这个值后并自动拼接成形如username=Tom&password=123的结构
					data: $("#form-reg").serialize(),

					dataType: "JSON",
					success: function (json) { //1.js是弱数据类型,这个地方不用声明json的数据类型
						//2.如果服务器成功响应就会将返回的数据传给形参,比如{state: 4000,message: "用户名
						// 已经被占用",data: null}
						if (json.state == 200) {
							alert("注册成功")
						} else {
							alert("注册失败")
						}
					},
					error: function (xhr) { //如果问题不在可控范围内,服务器就不会返回自己定
						//义的json字符串:{state: 4000,message: "用户名已经被占用",data: null}
						//而是返回一个XHR类型的对象,该对象也有一个状态码名字是status
						alert("注册时产生未知的错误!"+xhr.status);
					}
				});
			});
		</script>

	</body>

</html>